<template>
  <div class="user">
    <div class="user_top">
      <img v-if="isLogin" src="../../assets/images/pic.png" alt="" />
      <h3 v-if="isLogin" @click="goLogin">点击登录</h3>
      <van-icon v-if="isLogin" name="arrow" />
      <img v-if="!isLogin" :src="userPic" alt="" />
      <h3 v-if="!isLogin">{{ userName }}</h3>
      <van-icon @click="layout" v-if="!isLogin" name="cross" />
    </div>
    <van-grid :column-num="3" square>
      <van-grid-item
        v-for="item in gridList"
        :key="item.icon"
        :icon="item.icon"
        :text="item.text"
        @click="$toast('功能暂未开放，敬请期待')"
      />
    </van-grid>
    <van-overlay :show="loginShow" @click="loginShow = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <van-icon class="close" name="cross" @click="closeFn" />
          <van-form style="margin-top: 0.3rem" @submit="onSubmit">
            <van-field
              v-model="username"
              label="用户名"
              name="username"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="pwd"
              name="pwd"
              type="password"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px">
              <van-button
                round
                block
                size="block"
                type="info"
                color="linear-gradient(to right, #ff6034, #ee0a24)"
                native-type="submit"
                >注册/登录</van-button
              >
            </div>
          </van-form>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { doLogin } from '@/api/user'
export default {
  data () {
    return {
      gridList: [
        { text: '我的订单', icon: 'label-o' },
        { text: '优惠券', icon: 'bill-o' },
        { text: '礼品卡', icon: 'goods-collect-o' },
        { text: '我的收藏', icon: 'location-o' },
        { text: '我的足迹', icon: 'flag-o' },
        { text: '会员福利', icon: 'contact' },
        { text: '地址管理', icon: 'aim' },
        { text: '账号安全', icon: 'warn-o' },
        { text: '联系客服', icon: 'service-o' },
        { text: '帮助中心', icon: 'question-o' },
        { text: '意见反馈', icon: 'smile-comment-o' }
      ],
      loginShow: false,
      username: '',
      pwd: ''
    }
  },
  methods: {
    goLogin () {
      this.loginShow = true
    },
    async onSubmit (val) {
      const res = await doLogin(val)
      this.closeFn()
      if (res.errno !== 0) {
        this.$toast(res.errmsg)
      } else {
        this.$toast('登录成功')
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo))
        this.$router.go(0)
      }
    },
    closeFn () {
      this.username = ''
      this.pwd = ''
      this.loginShow = false
    },
    // 退出登录
    layout () {
      this.$dialog.confirm({
        title: '退出登录',
        message: '您是否想退出当前账号'
      })
        .then(() => {
          // 清空token
          this.$toast('退出成功')
          window.localStorage.clear()
          this.$router.go(0)
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  computed: {
    isLogin () {
      const token = localStorage.getItem('token')
      if (!token) {
        return true
      } else {
        return false
      }
    },
    userName () {
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      return userInfo.username
    },
    userPic () {
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      return userInfo.avatar
    }
  }
}
</script>

<style lang='less' scoped>
.user_top {
  height: 0.7rem;
  background-color: #333;
  padding: 0.2rem 0.1rem;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    margin-right: 0.1rem;
  }
  h3 {
    flex: 1;
    font-size: 0.14rem;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 90%;
  background-color: #fff;
  position: relative;
}
.close {
  position: absolute;
  top: 0.15rem;
  right: 0.3rem;
}
</style>
